<template>
    <div class="container">
        <!-- 一个纯粹的 PDF demo页 需要调整修改 -->
        <div class="pdf-container">
            <!-- TODO 这里要设置加载中的图片 -->
            <div v-if="!success">加载中...</div>
            <!-- 在这里我没有做懒加载,如果需要的话请参照党建库代码 -->
            <pdf
                ref="pdf"
                v-for="i in pageAll"
                :key="i"
                :src="url"
                :page="i"
            ></pdf>
        </div>
    </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    name: "PdfViewTemplate",
    components:{pdf},
    data(  ){
        return{
            id: '',
            url: '',
            timer: null,
            pageNow: 0,
            pageAll: 0,
            success: false
        }
    },
    created() {
        // TODO 这里记得设置ID
        this.init(null)
    },
    methods:{
        init(id) {
            this.id = id
            // TODO 我这里是随便整的一个pdf的链接,仅限demo使用,真实操作肯定是要去服务器获取PDF链接的
            const url = "https://cdstsgzjk.com:8009/pdf/resource/1429263968068198401/java-development-specification_1629650303573.pdf"
            this.url = pdf.createLoadingTask({
                url: url,
                cMapUrl: '/static/cmaps/',
                cMapPacked: true
            })

            this.url.promise.then(pdf => {
                this.pageAll = pdf.numPages
                this.success = true
                console.log(pdf)
                console.log(pdf.numPages)
            }).catch((err) => {
                console.error(err)
            })
        },
    },
}
</script>

<style lang="less" scoped>
.pdf-container{
    margin: 0 auto;
    width: 550px;
    /** PC端 */
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}
</style>
